<template>
    <div class="paymentStop2">
        <header>
            <van-nav-bar>
                <template #left>
                    <van-icon name="arrow-left" @click="$router.back()" size="20" color="black" />
                </template>
                <template #title>
                    <div class="mood" v-if="isflag">
                        <van-icon name="wechat" color="rgb(9,187,7)" size="20"></van-icon>
                        <h4>微信支付</h4>
                    </div>
                    <div class="mood" v-else>
                        <van-icon name="alipay" color="rgb(7 146 187)" size="20"></van-icon>
                        <h4>支付宝支付</h4>
                    </div>
                </template>
            </van-nav-bar>
        </header>
        <nav>
            <div class="price"><h2><i>¥</i>{{ allprice }}.00</h2></div>
        </nav>
        <main>
            <!-- 密码输入框 -->
            <van-password-input
            :value="value"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
            />
            <!-- 数字键盘 -->
            <van-number-keyboard
            v-model="value"
            :show="showKeyboard"
            @blur="showKeyboard = false"
            />
        </main>
    </div>
</template>
<style lang="stylus" scoped>
.paymentStop2
    display flex
    flex-direction column
    background-color #f5f5f5
    flex 1
    .mood
        display flex
        align-items center
    nav
        height 8.125rem
        display flex
        flex-direction column
        justify-content center
        align-items center
        .price
            color red
            font-size 1.125rem
            i
                font-style normal
                font-size 1.125rem
</style>
<script>
import Vue from 'vue'
import { PasswordInput, NumberKeyboard, Toast } from 'vant'
Vue.use(PasswordInput)
Vue.use(NumberKeyboard)
Vue.use(Toast)
export default {
  data () {
    return {
      isflag: false,
      value: '',
      showKeyboard: true,
      allprice: 0,
      timeid: '',
      orderState: []
    }
  },
  methods: {
  },
  mounted () {
    // 获取订单id
    this.timeid = this.$route.params.timeid
    // 获取总价
    this.allprice = this.$route.params.allPrice
    // 设置默认支付方式
    this.isflag = this.$route.params.radioId === '1'
    // 获取当前订单商品列表
    this.orderState = this.$store.state.orderState
  },
  watch: {
    value: {
      handler (newval) {
        if (newval.length === 6) {
          if (newval === '123456') {
            const index = this.orderState.findIndex(item => {
              return item.key === this.timeid
            })
            this.orderState[index].isflag = true
            localStorage.setItem('orderState', JSON.stringify(this.orderState))
            this.$router.push('/payment/stop3')
          } else {
            Toast('密码输入错误')
          }
        }
      }
    }
  }
}
</script>
